<template>
  <div class="app-container">
    <!-- 筛选列表 -->
    <el-card style="margin-bottom: 20px" id="search" class="search">
      <div slot="header" class="clearfix">
        <span>自缴费学校管理</span>
      </div>
      <div class="text item">
        <el-form
          :model="queryParams"
          ref="queryForm"
          :rules="rules"
          :inline="true"
          label-width="80px"
          class="serach_contant"
        >
          <el-form-item label="省份：" prop="provinceId">
            <el-select
              v-model="queryParams.provinceId"
              placeholder="请输入所在省份"
              clearable
              size="small"
              filterable
              default-first-option
              @change="changeProvince"
            >
              <el-option
                v-for="(item, index) in selectProvince"
                :key="index"
                :label="item.provinceName"
                :value="item.provinceId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="城市：" prop="cityId">
            <el-select
              v-model="queryParams.cityId"
              placeholder="请输入所在城市"
              clearable
              size="small"
              filterable
              default-first-option
              @change="changeSchool"
            >
              <el-option
                v-for="(item, index) in selectCityName"
                :key="index"
                :label="item.name"
                :value="item.cityId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="中学：" prop="schoolId">
            <el-select
              v-model="queryParams.schoolId"
              placeholder="请输入中学"
              clearable
              size="small"
              filterable
              default-first-option
            >
              <el-option
                v-for="(item, index) in selectSchoolName"
                :key="index"
                :label="item.name"
                :value="item.schoolId"
              />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" size="mini" @click="Add">添加</el-button>
            <el-button size="mini" @click="Delete">删除</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <!-- 筛选列表 -->
    <el-card style="margin-bottom: 20px" class="search">
      <div slot="header" class="clearfix">
        <span>获取学生PDF管理</span>
      </div>
      <div class="text item">
        <el-form
          :model="querySchool"
          ref="queryFormSchool"
          :rules="ruleSchool"
          :inline="true"
          label-width="80px"
          class="serach_contant"
        >
          <el-form-item label="学校ID：" prop="provinceId">
            <el-input v-model="querySchool.score" placeholder="请输入学校ID"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini">获取学生PDF</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getProvinceName } from "@/api/gwoper/apply";
import { getCityName, getSchool, toUpdate } from "@/api/toolsystem/school";
export default {
  data() {
    return {
      loading: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        provinceId: null,
        cityId: null,
        schoolId: null,
        status: 1,
      },
      rules:{
        provinceId: [{ required: true, message: '请选择省份', trigger: 'change' }],
        cityId: [{ required: true, message: '请选择城市', trigger: 'change' }],
        schoolId: [{ required: true, message: '请选择中学', trigger: 'change' }],
      },
      // 筛选省会城市
      selectProvince: [],
      selectCityName: [],
      selectSchoolName: [],
      querySchool: {
        schoolId: null,
      },
      ruleSchool:{
        schoolId: [{ required: true, message: '请输入学校ID', trigger: 'blur' }],
      },
    };
  },
  created() {
    this.getProvinceName();
  },
  methods: {
    handleQuery() {},
    // 获取筛选的省份和城市
    getProvinceName() {
      getProvinceName().then((res) => {
        // console.log(res, "ppp");
        this.selectProvince = res;
      });
    },
    changeProvince(value) {
      // console.log($event,'11')
      // this.queryParams.provinceName = value.provinceName;
      getCityName(value).then((res) => {
        // console.log(res, "cc");
        this.selectCityName = res.data;
      });
      this.queryParams.cityId = "";
      this.queryParams.schoolId = "";
    },
    changeSchool(value) {
      console.log(value, "schoolId");
      // this.queryParams.cityName = value.cityName;
      getSchool(value).then((res) => {
        // console.log(res, "cc");
        this.selectSchoolName = res.data;
      });
      this.queryParams.schoolId = "";
    },

    change(status) {
      this.$refs["queryForm"].validate((valid) => {
        if (!valid) return;

        this.queryParams.status = status;
        this.loading = true;
        toUpdate(this.queryParams).then((res) => {
          if (res.code != 200) {
            return this.msgInfo(res.msg);
          }
          if(status==0){
            return this.msgInfo("删除成功");
          }else{
            return this.msgInfo("添加成功");
          }
        });
        this.queryParams = {
          provinceId: "",
          cityId: "",
          schoolId: "",
        };
      });
    },
    Add() {
      this.change(1);
    },
    Delete() {
      this.change(0);
    },
  },
};
</script>
<style scoped>
</style>
